<template>
	<view class="timeline-con">
		<view class="line-item" v-for="(item, index) in list" :key="index">
			<!-- 2024-10-29 07:11:57 -->
			<view class="left">
				<view>{{ item.JieshuRQ.split('-')[0] }}</view>
				<view>-</view>
				<view>{{ item.KaishiRQ.split('-')[0] }}</view>
			</view>
			<view class="center">
				<view class="line"></view>
				<view class="line"></view>
				<view class="dot" :style="{ backgroundColor: dotColor }">
					<!-- <view class="dot-x"></view> -->
				</view>
			</view>
			<view class="right" @click="handleClick(item)">
				<!-- <view class="name" v-if="isAvatar">
					<image mode="aspectFit" :src="item.avatar" v-if="item.avatar" />
					<image mode="aspectFit" :src="require('../../static/images/default_avatar.png')" v-else />
				</view> -->
				<view class="content">
					<text class="mb-10">{{ item.title }}</text>
					<text class="text-cut content-info" style="margin-left: 16rpx">{{ item.content }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * qhhh-timeLine 时间线组件
 * @description 时间线组件，可自定义头像、自定义内容、自定义颜色等
 * @tutorial
 * @property {Array} list 时间线列表
 * @property {Boolean} isAvatar 是否显示头像
 * @property {String} dotColor 圆圈的颜色
 * @property {String} lineColor 线的颜色
 * @event {Function} click 点击某条时间记录的事件，参数为输入框当前的时间线对象数据
 */

export default {
	props: {
		list: {
			type: Array,
			default: []
		},
		isAvatar: {
			type: Boolean,
			default: true
		},
		dotColor: {
			type: String,
			default: '#FB353B'
		},
		lineColor: {
			type: String,
			default: '#FB353B'
		}
	},
	data() {
		return {};
	},

	methods: {
		show(item) {
			this.$emit('handleClick', item);
		},
		// 日期格式化
		parseTime(time, pattern) {
			if (arguments.length === 0 || !time) {
				return null;
			}
			const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}';
			let date;
			if (typeof time === 'object') {
				date = time;
			} else {
				if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
					time = parseInt(time);
				} else if (typeof time === 'string') {
					time = time
						.replace(new RegExp(/-/gm), '/')
						.replace('T', ' ')
						.replace(new RegExp(/\.[\d]{3}/gm), '');
				}
				if (typeof time === 'number' && time.toString().length === 10) {
					time = time * 1000;
				}
				date = new Date(time);
			}
			const formatObj = {
				y: date.getFullYear(),
				m: date.getMonth() + 1,
				d: date.getDate(),
				h: date.getHours(),
				i: date.getMinutes(),
				s: date.getSeconds(),
				a: date.getDay()
			};
			const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
				let value = formatObj[key];
				if (key === 'a') {
					return ['日', '一', '二', '三', '四', '五', '六'][value];
				}
				if (result.length > 0 && value < 10) {
					value = '0' + value;
				}
				return value || 0;
			});
			return time_str;
		}
	}
};
</script>

<style lang="scss" scoped>
.timeline-con {
	background-color: transparent;
	padding: 0 24rpx 24rpx;
	height: 100%;
	overflow: auto;

	.line-item {
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.left {
			width: 80rpx;
			text-align: right;
			display: flex;
			flex-direction: column;
			// transform: translateY(20rpx);

			font-family: PingFang SC, PingFang SC;
			// font-weight: 500;
			font-size: 24rpx;
			color: #000000;
			line-height: 22rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: -20rpx;
		}

		.center {
			margin: 0 12rpx;
			height: 100%;
			// background-color: red;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.line {
				width: 1rpx;
				height: 50%;
				border-left: 2rpx dotted #FB353B;
				// background-color: #f0f0f0;
			}

			.dot {
				position: absolute;
				top: 0;
				bottom: 0;
				margin: auto;
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
				// background-color: #1890FF;
				display: flex;
				align-items: center;
				justify-content: center;

				// .dot-x {
				// 	position: absolute;
				// 	top: 0;
				// 	bottom: 0;
				// 	margin: auto;
				// 	width: 18rpx;
				// 	height: 18rpx;
				// 	border-radius: 50%;
				// 	background-color: #fff;
				// }
			}
		}

		.right {
			width: calc(100% - 160rpx - 80rpx);
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			.name {
				width: 60rpx;
				margin-right: 6rpx;
				display: flex;
				align-items: center;
			}

			.content {
				width: calc(100% - 60rpx - 6rpx);
				flex: 1;
				display: flex;
				flex-direction: column;
				// transform: translateY(20rpx);
			}
		}
	}

	.line-item:first-child {
		.line:nth-child(1) {
			opacity: 0;
		}
	}

	.line-item:last-child {
		.line:nth-child(2) {
			opacity: 0;
			display: none;
		}
	}
}

.title-color {
	color: #00000099;
}

.mb-10 {
	margin-bottom: 10rpx;

	// width: 318rpx;
	// height: 34rpx;
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
	text-align: left;
	font-style: normal;
	text-transform: none;

	// width: 350rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}

.text-cut {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.content-info {
	// width: 530rpx;
	max-height: 100rpx;
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 20rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
</style>
